<!--  -->
<template>
  <div class="web-top" :class="{ 'web-top-close-nav': isCollapse }">
    <img src="../assets/img/icon_logo.png" alt="" class="icon_logo" />
    <span class="zhiname">{{ $t('message.webTop') }}</span>
    <div class="title-right">
      <span class="tuichu" style="cursor: pointer;" @click="loginout">{{ $t('message.logOut') }}</span>
    </div>
  </div>
</template>

<script>
import { baseAPI } from '@/api/base';
// import { mapMutations,mapState } from 'vuex';
export default {
  props: {
    paramThis: {
      type: Object,
      default: null,
    },
  },
  name: 'web-top',
  components: {},
  // computed: {
  // 	...mapState(['user','index'])
  // },
  data() {
    return {
      isCollapse: false,
      authority: 1,
      nickName: '客服',
      shenfen: false,
      zhungtai: 0, //0未轮单1轮单中
      chaoguan: 0, //0客服 1超管
      hList: [
        { id: 1, name: this.$t('message.homePage'), path: './New' },
        { id: 2, name: this.$t('message.userCenter'), path: './htwo' },
        { id: 3, name: this.$t('message.orderList'), path: './hthree' },
        { id: 4, name: this.$t('message.orderStatistics'), path: './hfour' },
        { id: 5, name: this.$t('message.blacklist'), path: './hfive' },
        { id: 6, name: this.$t('message.orderSettlement'), path: './hsix' },
      ],
      hindex: 1,
      info: {
        action: {
          code: '',
        },
      },
    };
  },
  mounted() {},
  // watch: {
  // 	orderone(newVal, oldVal) {
  // 	console.log(newVal)
  // 	if (newVal) {
  // 		this.orderone = newVal
  // 	}
  // 	}
  // },
  methods: {
    // 展开收起按钮
    openCloseNav() {
      this.isCollapse = !this.isCollapse;
      this.paramThis.isCollapse = this.isCollapse;
    },
    loginout() {
      this.$confirm(this.$t('message.confirmLogout'),this.$t('message.prompt'), {
        confirmButtonText: this.$t('message.confirm'),
        cancelButtonText: this.$t('message.cancel'),
        type: 'warning',
      }).then(() => {
        localStorage.setItem('homelist', '');
        localStorage.setItem('able_use', '');
        localStorage.setItem('istoken', '');
        localStorage.setItem('order_able_use', '');
        localStorage.setItem('listtoken', '');
        localStorage.setItem('listinfo', '');
        this.$store.dispatch('user/logout').then(res => {
          console.log('退出成功');
          this.$router.push('./login');
        });
      });
      // this.$loginout()
    },
    // getInfo(){
    //     baseAPI.userinfo().then((res =>{
    // 		// console.log(res)
    // 		// console.log('src/components/webTop.vue---94行')
    // 		if(res.code == 1){
    // 			this.info = res.data
    // 		}

    // 	}))
    // },
    hitemClick(item) {
      this.hindex = item.id;
      // this.$router.replace(item.path)
      // if(item.path == )
      // if(item.path == './New'){
      // 	// location.reload()
      // 	// this.$router.push(item.path);
      // 	this.$router.push({
      // 		path:item.path,
      // 		query: {
      // 		t: +new Date()
      // 		}
      // 	})
      // }else{
      // 	this.$router.push(item.path);
      // }

      this.$router.push(item.path);
    },
  },
};
</script>

<style scoped>
.web-top {
  width: 100%;
  height: 54px;
  line-height: 72px;
  background: #1c1d24;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
  padding: 0px 35px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.open-close-nav {
  font-size: 30px;
  cursor: pointer;
  vertical-align: middle;
  margin-left: 10px;
}
.web-top-close-nav {
  padding-left: 70px !important;
  transition: width 0.001s ease-in-out;
}
.title-right {
  /* width: 30%; */
  margin-left: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.zhiname {
  font-weight: 500;
  font-size: 18px;
  color: #cccccc;
}
.icon_logo {
  width: 60px;
  height: 60px;
  margin-right: 13px;
}
.tuichu {
  /* color: rgba(252,51,62,1); */
  color: #fff;
  font-size: 14px;
  font-weight: bold;
}
.name {
  color: #fff;
  display: inline-block;
  margin-right: 8px;
  font-weight: bold;
  cursor: pointer;
}
.money {
  display: inline-block;
  /* margin: 0 5px; */
  margin-right: 8px;
  color: green;
  font-weight: 500;
  font-size: 13px;
  cursor: pointer;
}
.title-right-image {
  display: flex;
  align-items: center;
}
.right-image {
  width: 40px;
  height: 40px;
  border: 1px solid black;
  border-radius: 20px;
  margin-right: 5px;
  margin-left: auto;
}
.shenfen {
  margin-right: 20px;
}
.shenfen span {
  font-size: 18px;
  font-weight: 500;
  color: #333;
  position: relative;
  top: 3px;
}

.hlist {
  height: 100%;
  display: flex;
  flex-direction: row;
  margin-left: 30px;
}
.hitem {
  width: 85px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.hitem:hover {
  /* background-color: rgba(251,51,62,1); */
}
.hactive {
  background-color: rgba(251, 51, 62, 1);
  color: #fff;
}

.newtabname {
  max-width: 150px;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  padding: 2px 6px;
  /* background-color: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 3px; */
  cursor: pointer;
  min-width: 50px;
}
</style>
